<template>
	<view class="my-guagua" :class="[ result ? 'res' : 'req', price ? 'price' : '' ]">
		<view class="content">
			{{result&&price?priceText:''}}
		</view>
		
		<view class="btn" @click="onBtn"></view>
		
		<u-mask :show="show" :mask-click-able="false">
			<view class="mask">
				<view class="gua1" v-if="price">
					<view class="ct">
						{{priceText}}
					</view>
				</view>
				<view class="gua0" v-if="!price"></view>
				<image src="../../../static/images/close.png" style="width: 72rpx;height: 72rpx;margin-top: 32rpx;" mode="aspectFill" @click="show=false"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				result: false,
				price: false,
				priceText: '满2000减200设计券'
			};
		},
		methods: {
			onBtn() {
				this.$emit('btn', 'click')
			}
		}
	}
</script>

<style lang="scss">
	.my-guagua {
		width:750rpx;
		height:644rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content {
			margin-top: 186rpx;
			width: 514rpx;
			height: 208rpx;
			display: flex;
			justify-content: center;
			padding-top: 56rpx;
			font-family:AlibabaPuHuiTi-Regular,AlibabaPuHuiTi;
			font-weight:400;
			color:#FF8B00;
			font-size: 32rpx;
			letter-spacing: 4rpx;
		}
		
		&.req {
			background: url(../../../static/images/gua-req.png);
			background-size: 100% 100%;
			.content {
				background: url(../../../static/images/gua-ct.png);
				background-size: 100% 100%;
			}
		}
		
		&.res {
			background: url(../../../static/images/gua-res.png);
			background-size: 100% 100%;
			&.price {
				.content {
					background: url(../../../static/images/gua-ct0.png);
					background-size: 100% 100%;
				}
			}
			.content {
				background: url(../../../static/images/gua-ct1.png);
				background-size: 100% 100%;
			}
			.btn {
				display: none;
			}
		}
		
		.btn {
			margin-top: -144rpx;
			width: 255rpx;
			height: 94rpx;
			background: url(../../../static/images/gua-btn.png);
			background-size: 100% 100%;
		}
		.mask {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.gua1 {
			width: 750rpx;
			height: 748rpx;
			background: url(../../../static/images/gua-1.png);
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family:AlibabaPuHuiTi-Regular,AlibabaPuHuiTi;
			font-weight:400;
			color:#FF8B00;
			font-size: 32rpx;
			letter-spacing: 2rpx;
			.ct {
				width: 462rpx;
				height: 186rpx;
				background: url(../../../static/images/gua-11.png);
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 48rpx;
			}
		}
		.gua0 {
			width: 750rpx;
			height: 748rpx;
			background: url(../../../static/images/gua-0.png);
			background-size: 100% 100%;
		}
	}
</style>
